<template>
  <div class="app-container" v-loading="loading">
    <vxe-form
      :data="formData"
      @submit="onSearchBtnClick"
      @reset="onSearchBtnClick"
    >
      <vxe-form-item
        field="name"
        :item-render="{
          name: 'input',
          attrs: { placeholder: '请输入分类名称搜索' },
        }"
      />
      <vxe-form-item
        field="code"
        :item-render="{
          name: 'input',
          attrs: { placeholder: '请输入分类编码搜索' },
        }"
      />
      <vxe-form-item
        :item-render="{
          name: '$buttons',
          children: [
            { props: { type: 'submit', content: '查询', status: 'primary' } },
            { props: { type: 'reset', content: '重置' } },
          ],
        }"
      />
    </vxe-form>
    <vxe-toolbar custom>
      <template v-slot:buttons>
        <vxe-button
          v-auth="['admin', 'goodsType:add']"
          size="medium"
          icon="el-icon-circle-plus-outline"
          status="primary"
          @click="onAddBtnClick"
          >新增</vxe-button
        >
        <!-- <vxe-button v-auth="['admin', 'goodsType:delete']" size="medium" icon="el-icon-delete" status="danger" :disabled="!multipleSelection.length" @click="onDeleteBtnClick">删除</vxe-button> -->
      </template>
    </vxe-toolbar>
    <vxe-table
      ref="table"
      border
      size="mini"
      :loading="loading"
      :tree-config="{ children: 'childrens' }"
      :data="list"
      resizable
      align="left"
      show-overflow
      show-header-overflow
    >
      <vxe-table-column type="seq" width="75px" title="序号" align="center" />
      <vxe-table-column field="name" title="分类名称" tree-node width="350px" />
      <vxe-table-column field="code" title="分类编码" width="350px" />
      <vxe-table-column
        field="enabled"
        title="状态"
        width="100px"
        align="center"
      >
        <template v-slot="{ row }">
          <vxe-switch
            v-model="row.enabled"
            open-label="启用"
            close-label="停用"
            @change="onChangeEnable($event, row.id)"
          />
        </template>
      </vxe-table-column>
      <vxe-table-column title="操作" show-overflow align="center" width="80px">
        <template v-slot="{ row }">
          <el-tooltip content="编辑" placement="top">
            <vxe-button
              v-auth="['admin', 'dept:update']"
              size="mini"
              icon="el-icon-edit"
              status="primary"
              @click="onEditBtnClick(row)"
            />
          </el-tooltip>
        </template>
      </vxe-table-column>
    </vxe-table>
    <Form v-if="detail" v-model="detail" @colseDialog="colseDialog" />
  </div>
</template>

<script>
import Form from './form'
export default {
  components: {
    Form,
  },
  data() {
    return {
      loading: false,
      formData: {
        name: '',
      },
      tableData: [],
      multipleSelection: [],
      detail: null,
    }
  },
  computed: {
    list() {
      if (this.formData.name) {
        const options = { children: 'childrens' }
        const searchProps = ['name']
        const rest = this.$utils.searchTree(
          this.tableData,
          (item) =>
            searchProps.some(
              (key) =>
                this.$utils
                  .toString(item[key])
                  .toLowerCase()
                  .indexOf(this.formData.name) > -1,
            ),
          options,
        )
        // 搜索之后默认展开所有子节点
        this.$nextTick(() => {
          this.$refs.table.setAllTreeExpand(true)
        })
        return rest
      }
      return this.tableData
    },
  },
  created() {
    this.onSearchBtnClick()
  },
  methods: {
    selectAllEvent({ checked, records }) {
      this.multipleSelection = records
    },
    selectChangeEvent({ checked, records }) {
      this.multipleSelection = records
    },
    onAddBtnClick() {
      this.detail = {}
    },
    onEditBtnClick(row) {
      this.detail = row
    },
    colseDialog() {
      this.detail = null
      this.onSearchBtnClick()
    },
    onSearchBtnClick() {
      this.tableData = [
        {
          id: '1d61ec1791102f45f0f52b52e2ab6b7b',
          pid: null,
          name: '建筑建材',
          enabled: true,
          code: 'jzjc',
          createTime: '2020-08-23 17:25:50',
          updateTime: '2020-08-23 17:32:34',
          childrens: [
            {
              id: 'hj',
              pid: '1d61ec1791102f45f0f52b52e2ab6b7b',
              name: '桁架',
              enabled: true,
              code: 'hj',
              formTemplate: 'hj',
              skuTemplate: 'hj',
              createTime: '2020-08-23 17:31:04',
              updateTime: '2020-11-29 00:23:04',
            },
            {
              id: 'gj',
              pid: '1d61ec1791102f45f0f52b52e2ab6b7b',
              name: '箍筋',
              enabled: true,
              code: 'gj',
              formTemplate: 'gj',
              skuTemplate: 'gj',
              createTime: '2020-08-23 17:30:58',
              updateTime: null,
            },
          ],
        },
        {
          id: 'ycl',
          pid: null,
          name: '农林牧渔',
          enabled: true,
          code: 'nlmy',
          createTime: '2020-08-23 17:25:50',
          updateTime: '2020-08-23 17:32:34',
          childrens: [
            {
              id: 'ycl-gj',
              pid: 'ycl',
              name: '豆类',
              enabled: true,
              code: 'dl',
              createTime: '2020-08-23 17:31:04',
              updateTime: '2020-11-29 00:23:04',
            },
            {
              id: 'gb',
              pid: 'ycl',
              name: '粮食',
              enabled: true,
              code: 'ls',
              createTime: '2020-08-23 17:30:58',
              updateTime: null,
            },
          ],
        },
      ]
    },
    onChangeEnable($event, id) {},
    async deleteData() {
      const selectRecords = this.$refs.table.getCheckboxRecords()
      await del(selectRecords.map((item) => item.id))
      this.$notify({
        type: 'success',
        message: '删除成功!',
      })
      this.onSearchBtnClick()
    },
  },
}
</script>
